<template>
  <div>
    <Nav :routernav="routernav" />
    <div class="wrap">
      <div class="shangjiamiandange">
        <div class="lunbo">
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
          <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/goodslunbo.png" alt />
              </div>
            </div>
          </div>
        </div>
        <div class="lunbozi">
          <h3>{{shuju.name}}</h3>
          <p>
            <span v-if="shuju.quanguois=='1'">全国</span>
            <span v-if="shuju.libaiwuis=='1'" class="libaiwu">礼拜五</span>
            <span v-if="shuju.ciridaois=='1'">次日达</span>
            <span v-if="shuju.ziyingis=='1'">自营</span>
          </p>
          <div class="zishenpingjia">
            <div class="tu">
              <img :src="require('../assets/img/'+shuju.zishenmaijiaimg)" alt />
              <div>资深买家</div>
            </div>
            <div class="right">{{shuju.jieshao}}</div>
          </div>
          <div class="jiage">
            <strong>现价 : ￥{{shuju.tejia}}</strong>
            <span>原价 : ￥{{shuju.danjia}}</span>
          </div>
          <div class="guige">
            <div class="left">请选择规格</div>
            <div class="right">
              <span
                @click="guige=shuju.guige1"
                :class="{active:guige==shuju.guige1}"
                v-if="shuju.guige1"
              >{{shuju.guige1}}</span>
              <span
                @click="guige=shuju.guige2"
                :class="{active:guige==shuju.guige2}"
                v-if="shuju.guige2"
              >{{shuju.guige2}}</span>
              <span
                @click="guige=shuju.guige3"
                :class="{active:guige==shuju.guige3}"
                v-if="shuju.guige3"
              >{{shuju.guige3}}</span>
            </div>
          </div>
          <div class="guige">
            <div class="left">请选择规格</div>
            <div class="right">
              <span
                @click="guige=shuju.guige4"
                :class="{active:guige==shuju.guige4}"
                v-if="shuju.guige4"
              >{{shuju.guige4}}</span>
              <span
                @click="guige=shuju.guige5"
                :class="{active:guige==shuju.guige5}"
                v-if="shuju.guige5"
              >{{shuju.guige5}}</span>
              <span
                @click="guige=shuju.guige6"
                :class="{active:guige==shuju.guige6}"
                v-if="shuju.guige6"
              >{{shuju.guige6}}</span>
            </div>
          </div>
          <div class="shuliang">
            <span>数量 :</span>
            <span class="shu">
              <a
                href="javascript:"
                @click="jianxiao"
                class="btn btn_minus"
                role="button"
                title="减少"
              ></a>
              <div class="inputNum">
                <input v-model="shuliang" size="1" />
              </div>
              <a
                href="javascript:"
                @click="shuliang++"
                class="btn btn_plus"
                role="button"
                title="增加"
              ></a>
            </span>
            <span>件</span>
            <div class="right">
              <span @click="gouwuche" class="juhuang">加入购物车</span>
              <span @click="lijigou">立即购买</span>
            </div>
          </div>
          <div class="bottom">
            <span @click="is=is?false:true" :class="{active:is}" class="xin">♥</span>
            <span>收藏此商品</span>
            <div>
              <span>分享到 :</span>
              <img src="../assets/img/fenxiang1.png" alt />
              <img src="../assets/img/fenxiang2.png" alt />
              <img src="../assets/img/fenxiang3.png" alt />
              <img src="../assets/img/fenxiang4.png" alt />
              <img src="../assets/img/fenxiang5.png" alt />
            </div>
          </div>
        </div>
      </div>
      <div class="out-bottom">
        <el-tabs type="border-card">
          <el-tab-pane label="商品详情">
            <detil></detil>
          </el-tab-pane>
          <el-tab-pane label="商品评价">
            <eva></eva>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import detil from "@/components/l-detil.vue";
import eva from "@/components/l-eva.vue";
import Nav from "@/components/nav.vue";
import Swiper from "swiper";
import axios from "axios";
export default {
  components: {
    detil,
    eva,
    Nav
  },
  data() {
    return {
      guige: "",
      is: false,
      routernav: [
        { zi: "首页", to: "/index/indexshouye" },
        { zi: "全部商品", to: "" },
        { zi: "未知", to: "" }
      ],
      shuliang: 1,
      shuju: {
        name: "新西兰佳沛黄金奇异果",
        zishenmaijiaimg: "pinluotouxiang.png",
        jieshao:
          "新西兰佳沛黄金奇异,果新西兰佳沛黄金奇异果新西兰佳沛黄金奇,异果新西兰佳沛黄金奇异果新西兰佳沛黄金奇异果新西兰佳沛黄金奇,异果新西兰佳沛黄,金奇异果新西兰佳沛黄金奇异,果新西兰佳沛黄金奇异果新西兰佳沛黄金奇,异果新西兰佳沛黄金奇异果新西兰佳沛黄金奇异果新西兰佳沛黄金奇",
        danjia: "10.00",
        tejia: "20.00",
        quanguois: "1",
        libaiwuis: "1",
        ciridaois: "1",
        ziyingis: "1",
        guige1: "500g",
        guige2: "1000g",
        guige3: "1500g",
        guige4: "2000g",
        guige5: "2500g",
        guige6: "3000g"
      }
    };
  },
  methods: {
    jianxiao() {
      if (this.shuliang > 1) {
        this.shuliang--;
      }
    },
    gouwuche() {
      var _this = this;
      var url = this.$store.state.url;
      axios
        .post(url + "addgouwuche", {
          goodname: _this.shuju.name,
          guige: _this.guige,
          danjia: _this.shuju.danjia,
          shiliang: _this.shuliang,
          imgurl: _this.shuju.imgurl,
          fuid: _this.shuju.fuid
        })
        .then(
          res => {
            // 成功回调
            if (res.data.code == "300") {
              alert("成功加入购物车")
            }
          },
          res => {
            window.console.log(res);
            // 错误回调
          }
        );
    },
    lijigou(){
      var zongjia = this.shuliang*this.shuju.tejia
      this.$store.commit("zongzong", zongjia);
      this.$router.push({name:"chongzhi"});
    }
  },
  mounted() {
    var _this = this;
    var url = this.$store.state.url;
    axios.post(url + "goodsid", { id: _this.$route.params.id }).then(
      res => {
        // 成功回调
        if (res.data.code == "200") {
          _this.shuju = res.data.data[0];
          window.console.log(res.data);
          _this.routernav[2].zi = res.data.data[0].name;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
    var galleryThumbs = new Swiper(".gallery-thumbs", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true
    });
    new Swiper(".gallery-top", {
      spaceBetween: 10,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });
  }
};
</script>
<style scoped>
.wrap {
  width: 80%;
  margin: 0px auto;
  margin-bottom: 2rem;
}
.shangjiamiandange {
  display: flex;
}
.shangjiamiandange .lunbo {
  width: 36%;
}
.shangjiamiandange .lunbo img {
  width: 100%;
}
.swiper-slide-thumb-active img {
  border: 1px solid red;
}
.lunbozi {
  margin-left: 2rem;
}
.gallery-thumbs {
  width: 90%;
  margin: 20px auto;
}
.shangjiamiandange h3 + p > span {
  padding: 0.2rem 1rem;
  background-color: #498e3d;
  color: white;
  margin-right: 1rem;
  font-size: 0.8rem;
}
.shangjiamiandange h3 + p > span.libaiwu {
  background-color: #f08200;
}
.zishenpingjia {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0px;
  display: flex;
  font-size: 0.8rem;
  align-items: center;
}
.zishenpingjia .tu img {
  width: 6rem;
  border-radius: 50%;
}
.zishenpingjia .tu img + div {
  background-color: #ffe313;
  line-height: 1.6rem;
  text-align: center;
  border-radius: 0.8rem;
}
.zishenpingjia .right {
  line-height: 1.6rem;
  color: #666;
  padding-left: 2rem;
}
.jiage {
  padding: 1rem 0px;
}
.jiage strong {
  font-size: 1.4rem;
  color: #f08200;
}
.jiage span {
  font-size: 0.9rem;
  text-decoration: line-through;
  padding-left: 2rem;
}
.guige {
  display: flex;
  color: #666;
  padding: 0.5rem 0px;
  align-items: center;
}
.guige .right {
  display: flex;
  align-items: center;
}
.guige .right span {
  font-size: 0.8rem;
  margin-left: 1rem;
  width: 4.6rem;
  line-height: 1.6rem;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
}
.guige .right span.active {
  background-color: #f4fff2;
  border: 1px solid #4b943d;
}
.shuliang {
  display: flex;
  align-items: center;
  padding: 1rem 0px;
}
.shu {
  display: flex;
  justify-content: center;
  padding: 0px 1rem;
}
.shuliang .right {
  display: flex;
}
.shuliang .right span {
  width: 7.6rem;
  line-height: 2.6rem;
  background-color: #f08200;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-left: 1rem;
  cursor: pointer;
}
.shuliang .right span.juhuang {
  background-color: #ffae4f;
}
.inputNum {
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
.inputNum input {
  vertical-align: middle;
  height: 1rem;
  border: none;
  text-align: center;
  outline: none;
}
.btn {
  display: inline-block;
  vertical-align: middle;
  background: #f0f0f0 no-repeat center;
  border: 1px solid #d0d0d0;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 1px rgba(100, 100, 100, 0.1);
  color: #666;
  transition: color 0.2s, background-color 0.2s;
}

.btn:active {
  box-shadow: inset 0 1px rgba(100, 100, 100, 0.1);
}

.btn:hover {
  background-color: #e9e9e9;
  color: #333;
}

.btn_plus {
  background-image: linear-gradient(to top, currentColor, currentColor),
    linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px, 2px 10px;
}
.bottom .xin {
  color: #ccc;
  font-size: 1.6rem;
  cursor: pointer;
  margin-right: 1rem;
}
.bottom .xin.active {
  color: #ec6a17;
}
.bottom {
  display: flex;
  align-items: center;
}
.bottom > div {
  display: flex;
  align-items: center;
  margin-left: 3rem;
}
.bottom > div > img {
  width: 1.6rem;
  margin-left: 0.6rem;
}
.btn_minus {
  background-image: linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px;
}
.el-tabs__item is-top is-active {
  border-bottom: 1px solid #008de1;
}
.out-bottom {
  width: 100%;
}
</style>